<template>
  <div>
    <div class="title">热门推荐</div>
    <ul class="list">
      <router-link tag="li" class="list-item border-bottom" v-for="item of list" :key="item.id" :to="'/detail/' + item.id">
        <img class="list-link-img" :src="item.imgUrl">
        <div class="list-info">
          <h2 class="list-info-h2">{{item.title}}</h2>
          <div class="list-info-p">{{item.desc}}</div>
          <div class="list-btn">查看详情</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.title
  padding: .24rem 0
  margin-left: .24rem
  height: .44rem
  font-size: .32rem
  line-height: .44rem
.list
  margin-left: .24rem
  .list-item
    position: relative
    overflow: hidden
    padding: .2rem 0
    height: 2rem
    min-width: 0
    .list-link-img
      float: left
      overflow: hidden
      width: 2rem
      height: 2rem
    .list-info
      overflow: hidden
      padding: 0 .3rem
      .list-info-h2
        font-size: .3rem
        color: #212121
        ellipsis()
      .list-info-p
        line-height: .4rem
        height: 0.8rem
        color: #999
        overflow: hidden
      .list-btn
        position: absolute
        bottom: .3rem
        color: #f60
        font-weight: 600
        font-size: .24rem
</style>
